import 'package:app/shared/constants/common.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';

class RankIngCom extends StatelessWidget {
  const RankIngCom({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final double sizeW = 34;
    final double offsetW = 24.0;

    double _getImageStackWidth(int imageNumber) {
      return offsetW * (imageNumber - 1) + sizeW;
    }

    List<Widget> _getStackItems(int count) {
      List<Widget> _list = [];
      for (var i = 0; i < count; i++) {
        double off = 20.0 * i;
        _list.add(Positioned(
          left: off,
          child: Container(
            height: sizeW - 3,
            width: sizeW - 3,
            decoration: BoxDecoration(
                border: Border.all(color: Colors.white, width: 1),
                borderRadius: BorderRadius.circular(sizeW / 2)),
            child: ClipOval(
              child: Image(
                image: AssetImage("assets/test/avatar.jpg"),
                width: sizeW,
                height: sizeW,
              ),
            ),
          ),
        ));
      }
      return _list;
    }

    return Container(
      padding: EdgeInsets.all(sDefaultMarginPadding * 3),
      decoration: BoxDecoration(
          color: Color.fromRGBO(250, 242, 226, 1),
          borderRadius: BorderRadius.circular(sDefaultMarginPadding * 2)),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          SvgPicture.asset(
            "assets/icons/guanjun.svg",
            width: 40,
          ),
          SizedBox(
            width: 10,
          ),
          Text(
            "活跃排行榜",
            style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
          ),
          Expanded(
            child: Container(
                height: 30,
                alignment: Alignment.topRight,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: <Widget>[
                    SizedBox(
                      width: _getImageStackWidth(5),
                      height: double.infinity,
                      child: Stack(
                        children: _getStackItems(5),
                      ),
                    ),
                    Icon(Icons.chevron_right),
                  ],
                )),
          )
        ],
      ),
    );
  }
}
